<template>
  <div class="hezi">
    <el-container>
      <!-- 左边导航 -->
      <el-aside width="200px">
        <div class="name">后台</div>
        <el-menu class="bgc">
          <el-menu-item index="2" @click="jump('/home/WenZhang')">
            <i class="el-icon-menu"></i>
            <span slot="title">文章列表</span>
          </el-menu-item>
          <el-menu-item index="4" @click="jump('/home/bianji')">
            <i class="el-icon-setting"></i>
            <span slot="title">发布文章</span>
          </el-menu-item>
          <el-menu-item @click="out">
            <span slot="title">退出登录</span>
          </el-menu-item>
          <el-menu-item></el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <div class="nicheng">
            <span class="Myname">{{pro.nickname}}</span>
            <img v-if="!pro.head_img" src="../imgs/logo.png" alt class="imgs" />
            <img v-else :src="$axios.defaults.baseURL+pro.head_img" alt class="imgs" />
            <div class="nicheng_left">
              <el-button type="text" @click="open">
                <span>最新公告</span>
              </el-button>
            </div>
          </div>
        </el-header>
        <el-main>
          <breadcrumb />
          <router-view></router-view>
        </el-main>
      </el-container>


    </el-container>


  </div>
</template>

<script>

import breadcrumb from '../components/mianbaoxie';
export default {
 components: {
        breadcrumb
    },


  data() {
    return {
      pro: JSON.parse(localStorage.getItem("user"))
    };
  },
  mounted() {
    // 发送ajax请求
    // console.log(pro);

    // this.$axios({
    //   url: "/user/" + localStorage.getItem("user"),

    //   method: "get"
    // }).then(res => {
    //   // console.log(res.data);

    //   this.pro = res.data.data;
      // console.log(this.pro);

      //   if(!this.pro.head_img){
      //       this.pro.head_img='../imgs/logo.png'
      //   }else{
      //       this.pro.head_img=$axios.defaults.baseURL+this.pro.head_img
      //   }
    // });
  },
  methods: {
    out() {
      localStorage.removeItem("user"), localStorage.removeItem("token");
      this.$router.push("/");
    },
    open() {
      this.$alert("这是一段内容", "标题名称");
    },
    jump(path) {
      if (path != this.$route.path) {
        this.$router.push(path);
      }
    }
  }
};
</script>

<style lang="less" scoped>
.hezi {
  position: absolute;
  display: flex;
  width: 100%;
  height: 100%;
}
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  //   text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  //   line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  // text-align: center;
  // line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.name {
  font-size: 30px;
  font-weight: 600;
  color: #6b6767;
  margin-top: 20px;
}
.bgc {
  background-color: #d3dce6;
}
.nicheng {
  display: flex;
  flex-direction: row-reverse;
  box-sizing: border-box;
  padding-top: 12px;

  .imgs {
    height: 37px;
    width: 37px;
    border-radius: 50%;
  }
  .Myname {
    margin-top: -12px;
    font-size: 20px;
    margin-left: 10px;
  }
  .nicheng_left {
    flex: 1;
    margin-top: -12px;
    span {
      color: red;
      font-size: 20px;
    }
  }
}
</style>
